<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>试题录入</span>
      </div>
      <el-form
        ref="form"
        :model="formData"
        label-width="80px"
        :rules="formRules"
      >
        <el-form-item label="学科:" prop="subjectID">
          <el-select
            v-model="formData.subjectID"
            placeholder="请输入"
            style="width: 300px"
            size="small"
            @focus="subject"
            @change="subjects(formData.subjectID)"
          >
            <el-option
              v-for="item in this.subjectType"
              :key="item.id"
              :label="item.subjectName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录:" prop="catalogID">
          <el-select
            v-model="formData.catalogID"
            placeholder="请输入"
            style="width: 300px"
            size="small"
          >
            <el-option
              v-for="item in this.catalogueList"
              :key="item.id"
              :label="item.directoryName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业:" prop="enterpriseID">
          <el-select
            v-model="formData.enterpriseID"
            placeholder="请输入"
            style="width: 300px"
            size="small"
            @change="catalogue()"
          >
            <el-option
              v-for="item in this.enterpriseLIstanbul"
              :key="item.id"
              :label="item.shortName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="城市:" prop="province">
          <el-select
            v-model="formData.province"
            placeholder="请选择"
            @change="changeCity"
            style="width: 98px; marginright: 10px"
          >
            <el-option
              v-for="item in city"
              :key="item.id"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
          <el-select
            v-model="formData.city"
            placeholder="请选择"
            style="width: 98px"
          >
            <el-option
              v-for="item in capital"
              :key="item.id"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向:" prop="direction">
          <el-select
            v-model="formData.direction"
            placeholder="请输入"
            style="width: 300px"
            size="small"
          >
            <!-- <el-option
              v-for="item in this.list"
              :key="item.id"
              :label="item.direction"
              :value="item.id"
            ></el-option> -->
              <el-option label="o2o" value="o2o"></el-option>
              <el-option label="外包服务" value="外包服务"></el-option>
              <el-option label="企业服务" value="企业服务"></el-option>
              <el-option label="互联网金融" value="互联网金融"></el-option>
              <el-option label="企业咨询" value="企业咨询"></el-option>
              <el-option label="互联网" value="互联网"></el-option>
              <el-option label="电子商务" value="电子商务"></el-option>
              <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题型:">
          <el-radio-group v-model="formData.questionType">
            <el-radio label="1">单选</el-radio>
            <el-radio label="2">多选</el-radio>
            <el-radio label="3">简答</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="难度:">
          <el-radio-group v-model="formData.difficulty">
            <el-radio label="1">简单</el-radio>
            <el-radio label="2">一般</el-radio>
            <el-radio label="3">困难</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="题干:" prop="question">
          <template>
            <vue-editor v-model="formData.question"></vue-editor>
          </template>
        </el-form-item>
        <el-row>
          <!--  单选 -->
          <div v-if="formData.questionType === '1'">
            <el-form-item label="选项:">
              <el-radio v-model="formData.options" label="1">A:</el-radio>
              <el-input
                v-model="formData.img"
                style="width: 300px; margin-right: 10px"
                :inilne="true"
              ></el-input>
              <el-button>点击上传</el-button>
            </el-form-item>
            <el-form-item label="选项:">
              <el-radio v-model="formData.options" label="2">B:</el-radio>
              <el-input
                v-model="formData.img"
                style="width: 300px; margin-right: 10px"
                :inilne="true"
              ></el-input>
              <el-button>点击上传</el-button>
            </el-form-item>
            <el-form-item label="选项:">
              <el-radio v-model="formData.options" label="3">C:</el-radio>
              <el-input
                v-model="formData.img"
                style="width: 300px; margin-right: 10px"
                :inilne="true"
              ></el-input>
              <el-button>点击上传</el-button>
            </el-form-item>
            <el-form-item label="选项:">
              <el-radio v-model="formData.options" label="4">D:</el-radio>
              <el-input
                v-model="formData.img"
                style="width: 300px; margin-right: 10px"
                :inilne="true"
              ></el-input>
              <el-button>点击上传</el-button>
            </el-form-item>
            <el-form-item>
              <el-button
                type="danger"
                disabled
                size="small"
                style="margin-lift: 30px"
                >+增加选项与答案</el-button
              >
            </el-form-item>
          </div>
          <!--  多选 -->
          <div v-if="formData.questionType === '2'">
            <el-checkbox-group v-model="checkList" ref="checkboxid">
              <el-form-item label="选项: ">
                <el-checkbox :label="0"
                  >A: &nbsp;<el-input
                    v-model="formData.options[0].title"
                  ></el-input></el-checkbox
                ><el-button style="margin-left: 40px">点击上传</el-button>
              </el-form-item>
              <el-form-item label="选项: ">
                <el-checkbox :label="1"
                  >B: &nbsp;<el-input
                    v-model="formData.options[1].title"
                  ></el-input></el-checkbox
                ><el-button style="margin-left: 40px">点击上传</el-button>
              </el-form-item>
              <el-form-item label="选项: ">
                <el-checkbox :label="2"
                  >C: &nbsp;<el-input
                    v-model="formData.options[2].title"
                  ></el-input></el-checkbox
                ><el-button style="margin-left: 40px">点击上传</el-button>
              </el-form-item>
              <el-form-item label="选项: ">
                <el-checkbox :label="3"
                  >D: &nbsp;<el-input
                    v-model="formData.options[3].title"
                  ></el-input></el-checkbox
                ><el-button style="margin-left: 40px">点击上传</el-button>
              </el-form-item>
              <el-form-item label="选项: " v-if="xinzheng">
                <el-checkbox :label="4"
                  >E: &nbsp;<el-input
                    v-model="formData.options[4].title"
                  ></el-input></el-checkbox
                ><el-button style="margin-left: 40px">点击上传</el-button>
              </el-form-item>
            </el-checkbox-group>
            <el-form-item>
              <el-button type="danger" @click="xinzheng = true"
                >+点击添加选择</el-button
              >
            </el-form-item>
          </div>
          <!-- 简答 -->
          <div v-if="formData.questionType === '3'"></div>
        </el-row>

        
        <el-form-item label="解析视频">
          <el-input v-model="formData.videoURL" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="答案解析:" prop="answer">
          <template>
            <vue-editor v-model="formData.answer"></vue-editor>
          </template>
        </el-form-item>
        <el-form-item label="题目备注">
          <el-input v-model="formData.remarks" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="题目标签:">
          <el-select
            @focus="biaoqianList"
            v-model="formData.tags"
            placeholder="请输入"
            style="width: 300px"
            size="small"
          >
            <el-option
              v-for="item in this.label"
              :key="item.id"
              :label="item.tagName"
              :value="item.tagName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button v-if="this.$route.query.id" type="success" @click="btnok">确认修改</el-button>
          <el-button v-else type="primary" @click="btnok">确认提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {
  subjectTypeApi,
  secondedDirectorysApi,
  enterpriseApi,
  addtoApi,
  addtoApis,
} from "@/api/questionsname";
import { provinces, citys } from "@/filters/chengshi.js"; // 导入城市文件夹
import { getListApi, biaoqianApi } from "@/api/questionslist";
export default {
  name: "NewPage",
  data() {
    return {
      // radios:'1',
      checkList: [], // 多选选项
      xinzheng: false,
      subjectType: [], // 学科列表
      catalogueList: [], // 目录列表
      enterpriseLIstanbul: [], // 企业列表
      list: [], //方向
      city: [], // 城市
      capital: [], // 城市
      label: [], // 标签数据
      id: this.$route.query.id,
      formData: {
        // subjectID: "", // 学科
        // catalogID: "", //目录
        // enterpriseID: "", //企业
        // province: "", //城市
        // city: "", //地区
        // direction: "互联网金融", //方向
        direction: [
          "o2o",
          "外包服务",
          "企业服务",
          "互联网金融",
          "企业咨询",
          "互联网",
          "电子商务",
          "其他",
        ],
        questionType: "1", //题型.
        difficulty: "1", //难度.
        // question: "", //题干
        options: [
          { code: "A", title: "", img: "", isRight: 0 },
          { code: "B", title: "", img: "", isRight: 0 },
          { code: "C", title: "", img: "", isRight: 0 },
          { code: "D", title: "", img: "", isRight: 0 },
          { code: "E", title: "", img: "", isRight: 0 },
        ], //选项.
        // code: "", //代码
        // title: "", //标题
        // img: "", //图片URL
        // isRigh: false, //是否正确答案
        // videoURL: "", //解析视频.
        // answer: "", //答案解析
        // remarks: "", //题目备注.
        // tags: "", //试题标签.
      },
      formRules: {
        subjectID: [{ required: true, message: "请输入", trigger: "blur" }],
        catalogID: [{ required: true, message: "请输入", trigger: "blur" }],
        enterpriseID: [
          { required: true, message: "请输入", trigger: "change" },
        ],
        province: [{ required: true, message: "请输入", trigger: "blur" }],
        // city: [{ required: true, message: "请输入", trigger: "blur" }],
        direction: [{ required: true, message: "请输入", trigger: "blur" }],
        question: [{ required: true, message: "请选择", trigger: "blur" }],
        answer: [{ required: true, message: "必须", trigger: "blur" }],
        // title: [{ required: true, message: "必须", trigger: "blur" }],
        // : [{ required: true, message: "必须", trigger: "blur" }],
        //  : [{ required: true, message: "请输入", trigger: "blur" }],
        // : [{ required: true, message: "请输入", trigger: "blur" }],
      },
    };
  },
  created() {
    // this.subject();
    this.catalogue(); //企业列表
    // 获取城市
    this.getList();
    // 方向
    this.initData();
    // 回显
    this.Echo()
  },
  methods: {
    // 学科列表
    async subject() {
      let { items } = await subjectTypeApi();
      // console.log(items);
      this.subjectType = items;
    },
    // 学科
    async subjects(id) {
      console.log(id);
      let { items } = await secondedDirectorysApi({ subjectID: id });
      // console.log(items);
      this.catalogueList = items;
      // directoryName
    },
    // 企业列表
    async catalogue() {
      let { items } = await enterpriseApi();
      // console.log(items);
      this.enterpriseLIstanbul = items;
      // directoryName
    },
    // 城市
    getList() {
      this.city = provinces();
    },
    appList(city) {
      this.capital = citys(city);
    },
    changeCity(city) {
      this.appList(city);
    },
    // 基础列表里的  方向
    //  列表功能
    async initData() {
      let { items, counts } = await getListApi(this.queryData);
      // console.log(items, counts);
      this.list = items;
      // this.counts = counts;
    },
    // 标签列表
    async biaoqianList() {
      let label = await biaoqianApi();
      // console.log(label);
      this.label = label.items;
      // console.log(this.label);
      // console.log(this.subject);
    },

    // 基础信息添加
    async btnok() {
      try {
        await this.$refs.form.validate();
      } catch (error) {
        console.log(error);
        return;
      }
      this.formData.direction = "互联网金融";
      try {
        await addtoApi(this.formData);
        this.$message.success("操作成功");
        this.$router.push('/questions/list')
      } catch (error) {
        console.log(error);
        this.$message.success("操作失败");
      }
    },
    // 回显
    async Echo(){
      if (this.$route.query.id){
        // this.id = this.$route.query.id
        // console.log(this.$route.query.id);
        let xx = await addtoApis(this.$route.query.id);
        console.log(xx);
        this.formData = xx
      }
    }
  },
};
</script>

<style>
</style>